<template>
  <el-form-item :prop="prop" :label="label">
    <el-button style="float: left; position: absolute; z-index: 10;" text @click="configRef.show()"
      v-if="selectId && loginInfo.userId == 1300000000101"></el-button>
    <el-select-v2 v-bind="$attrs" :options="items" :disabled="!isEdit" clearable :style="inputStyle" placeholder=""
      :reserve-keyword="false" default-first-option />
  </el-form-item>
  <SelectItemConfig ref="configRef" :options="options" :selectId="selectId" @uploadOptions="uploadOptions">
  </SelectItemConfig>
</template>

<script lang="ts" setup>
/* 可以自定义选项的Select组件
 用法: 
<MkSelect label='订血类型' v-model='ctx.master.dingXueLeiXing' prop='dingXueLeiXing'
  :options="['当日订血', '紧急订血', '预定用血']" selectId="yueXue_dingXueLeiXing" :isEdit='ctx.isEdit' />
*/
import { getInputWidth } from './shared';
import { loginInfo } from '/@/stores/baseInfo/';
import SelectItemConfig from './SelectItemConfig.vue';

defineOptions({
  name: 'MkSelect'
})

export interface SelectItem {
  value: string;
  label: string;
}

export interface TableItem {
  label: string;
}

const props = defineProps({
  prop: {
    type: String,
  },
  label: {
    type: String,
  },
  isEdit: {
    type: Boolean,
    default: true
  },
  col: { // 控制宽度, 最多设置为3, 特殊情况可以设置为4
    type: Number,
    default: 1
  },
  selectId: {
    // 选择框的id, 用于缓存选项, 
    // 未设置selectId时, 不缓存选项, 
    // 如果两个MkSelect的selectId相同, 则会共享选项
    type: String,
  },
  options: { // 默认选项
    type: Array<string>,
  },
})

const { inputStyle } = getInputWidth(props.col);
const items = ref([] as SelectItem[]); // 选项列表
const configRef = ref(); // 用于编辑选项的表格

const uploadOptions = (options: any) => {
  items.value = options;
}

</script>